<template>
	<view class="container">
		
		<view class="card" v-for="(item,index) in post" v-if="post.length" :key="index" >
			<tui-card >
				<template v-slot:body>
					<view class="tui-avatar" @tap.stop="goCommentDetail(item.id,cangodetail)">
						<image :src="item.user.avatar" class="avatar" mode="aspectFill" @tap.stop="gouserhp(item.user_id,touserhp)"></image>
						<view class="user-info">
							
							<view class="user-base">
								<view class="user-name">{{item.user.name}}</view>
								<view class="time-area">
									<view class="time">
										<view>{{item.time}}</view>
										<view class="duration">·已打卡{{item.user.post_days}}天</view>
									</view>
									<!-- 有传mid过来，就认定为是用户本人登录，可使用删除打卡操作 -->
									<view class="icon-delete" v-if=" mid" @tap.stop="deletepost" :data-index="index">
										<image src="/static/images/post/delete_postrecord.svg" mode=""></image>
										<text></text>
									</view>
								</view>
							</view>
							
							<view class="">
								{{item.body}}
							</view>
						</view>
					</view>
					
					<!-- 图文打卡 -->
					<view class="pic" v-if="item.catetype == '图文打卡'" >
						<view v-for="(img,index1) in item.images" :key="index1" class="pic-item" >
							<image :src="img" mode="aspectFill" @tap.stop="preview(img,item.images)" :class="item.images.length==1?'only-img':'lot-img'" ></image>
						</view>
					</view>
					
					<!-- 视频打卡 -->
					<view class="video-area" v-if="item.catetype == '视频打卡'&& item.video_data.videoSrc && use_video " >
							<view class="video_list y-f" :id="'el' + item.id">
								<view class="video">
									<video
										v-if="playVideoId == item.id" 
										:id="'vid' + item.id" 
										class="video-context"
										show-fullscreen-btn
										autoplay
										enable-play-gesture="true"
										controls
										:src="videoSrc"
										:poster="item.video_data.thumbTempFilePath"
									></video>
									<view v-else class="img_box" > 
										<view class="i_box"><image class="video_img" :src="item.video_data.thumbTempFilePath" mode="aspectFill"></image></view>
										<view class="video_logo " @tap.stop="videoPlay(item.id,item.video_data.videoSrc)"><image src="/static/images/post/play_video_btn.svg" mode=""></image></view>
									</view>
								</view>
							</view>

					</view>
					
					<!-- 音频打卡 -->
					<view class="audio" v-if="item.catetype == '音频打卡'&& item.audio_data  && use_audio "> 
						<multi-audio :audioId="'a'+index"
						             :audioData="item.audio_data" ></multi-audio>
					</view>
					<!-- 音频打卡 -->
					
					<!-- 分享类打卡 -->
					<view class="share" v-if="item.catetype == '分享打卡' && use_share">
							<view class="up-works-area">
								<view class="works-area" v-if="item.detail.err !== 1">
									<view class="w-cover"  @tap.stop="goShareDetail(item)"><image :src="item.detail.cover" mode="aspectFill"></image></view>
									<view class="">
										<view class="w-body" @tap.stop="goShareDetail(item)">
											<view class="w-name">{{item.detail.title}}</view>
											<view class="w-name">{{item.detail.name}}</view>
											<view class="w-intro">简介:{{item.detail.intro}}</view>
										</view>
										<view class="new-chapter" v-if="item.detail.type == 'Novel' && item.detail.new_chapter " @tap.stop="goNewChapter('/pages/post/comps/novchapters/chapterdetail?cid='+ item.detail.new_chapter.id +'&nov_id=' +item.detail.id)">
											最新章节:{{item.detail.new_chapter.title}}
										</view>
									</view>
									
								</view>
								
								<view class="works-area" v-else="item.detail.err == 1">
									{{item.detail.msg}}
								</view>
							</view>
					</view>
				</template>
			
					
				<template v-slot:footer>
					<view class="tui-default ">
						<!-- <view>深圳.世界之窗	</view> -->
						<view class="belong" v-if="!unshowcirtag" @tap="goCir(item.circle_id)">
							<image src="/static/images/post/cir-icon.svg" mode="aspectFill"></image>
							<view class="cir">{{item.circle}}</view>
						</view>
					</view>
					
					<!-- 打赏 -->
					<view class="reward-area" v-if="currentPid !== '' && use_video">
						<view class="reward-icon" @tap="showPay">
							<image src="/static/images/icon/reward.gif" mode="aspectFill"></image>
						</view>
						<reward :isShow="isShowReward" :list="list" @close="closePay" :customize="iscustomize" :coinAmount="coinAmount" @pay="pay(arguments)"></reward>
						<view class="reward-list"  v-if="rewardList.length">
							<view class="qty">
								共收到{{rewardList.length}}笔打赏
							</view>
							<view class="reward-img">
								<view class="reward-item"  v-for="(user,index1) in rewardList.slice(0,30)" @tap.stop="gouserhp(user.user_id)" :key="index1">
									<image :src="user.reward_user" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 点赞 and 评论 -->
					<view class="icon"> 
						<view class="icon-view" >
							<!-- <text class="ma rgin-lr-xs cuIcon-attention"></text> -->
								<image src="/static/images/icon/view.png" mode="" v-if="item.pageview"></image>
								<image src="/static/images/icon/unview.png" mode="" v-else></image>
							
							<text class="number" v-if="item.pageview > 0">{{item.pageview}}</text>
						</view>
						
						<view class="icon-commented">
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true"  v-if="!had_phone">
								<image src="/static/images/icon/replyed.png" mode="aspectFill" v-if="item.commented"></image>
								<image src="/static/images/icon/unreply.png" mode="aspectFill" v-else></image>
								<text class="number" v-if="item.commented > 0">{{item.commented}}</text>
							</button>
							<button @tap.stop="gocomment(item.id,index)"  v-else>
								<image src="/static/images/icon/replyed.png" mode="aspectFill" v-if="item.commented"></image>
								<image src="/static/images/icon/unreply.png" mode="aspectFill" v-else></image>
								<text class="number" v-if="item.commented > 0">{{item.commented}}</text>
							</button>
						</view>
						
						<view class="icon-liked">
							<text class="number" v-if="item.liked > 0"  @tap.stop="toggleLikePost(index,item)">{{item.liked}}</text>
							<text :class="[item.userliked?'cuIcon-appreciatefill':'cuIcon-appreciate'] " mode="aspectFill"  @tap.stop="toggleLikePost(index,item)"></text>
						<!-- 	<image src="/static/images/icon/liked.png" mode="" v-if="item.liked"></image>
							<image src="/static/images/icon/unlike.png" mode="" v-else ></image> -->
						</view>
						
					</view>
					
					<view class="comment-liker"  v-if="cangodetail">
						<view class="likers" :class="[item.likers.length && item.newest_user != null?'border':'' ]" v-if="item.likers.length">
							<image  src="/static/images/post/liker-icon.svg" mode="aspectFill"></image>
							<text class="liker-item" v-for="(liker,index1) in item.likers " @tap.stop="gouserhp(liker.id)" :key="index1">
								<text>{{liker.name}}</text>
								<text v-if="index1+1 != item.likers.length" >，</text>
							</text>
						</view>
						<view class="line" v-if="item.hot_comments.length !== 0 && item.likers.length && isshowcomment"></view>
						<view class=""   v-if=" isshowcomment">
							<view class="comment" v-if="item.hot_comments.length !== 0">
								<view class="comment-item" v-for="comment in item.hot_comments.slice(0,c_limit).reverse()" :key="comment.id">
									<text>{{comment.user_name || comment.user.name }}:</text>
									<text class="body">{{comment.body}}</text>
									
								</view>
								<view class="loadmore" v-if="item.commented > 5" @tap.stop="goCommentDetail(item.id,cangodetail)">全部{{item.commented}}条评论></view>
							</view>
							
						</view>
						
					</view>
					
				</template> 
			</tui-card>
		</view>
		
		<!-- 评论区 -->
		<!-- <view class="view-conmment-send-bottom"> 
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="view-comment-textarea" v-if="!had_phone"><view class="textarea-comment">发表评论…</view></button>
			<view class=" view-comment-textarea " style="padding: 20rpx 26rpx;" v-else @click="clickComment()">
				<view class="textarea-comment " >发表评论…</view>
			</view>
		</view> -->
		<five-comment class="comment-area" ref="detailComment" @sendComment="sendComment" @closeComment="closeComment"  :placeholder="placeholder"></five-comment>
		<!-- 评论区 -->
		
	</view>
</template>

<script>
	import tuiIcon from '../tui-icon/tui-icon.vue'
	import api from '../../common/api.js'
	
	import multiAudio from "../../components/multi-audio/multi-audio";
	import fiveCommentList from '../five-comment/five-comment.vue'
	import reward from './reward.vue'
	
	export default {
		
		props: {
							postsRecord:{type:Array,default:[]},			//打卡记录
							mid:'',																		//当前用户id
							unshowcirtag:false,												//是否显示圈子图标
							uid:'',																		//用户id
							cangodetail:false,												//是否可以查看详情--防止详情页二次跳转
							touserhp:{type:Boolean,default:true},			//查看用户主页
							isshowcomment:false,											//是否显示评论
							currentPid:{type:String,default:''} 			//当前打卡id
						},
		
		components: {
			tuiIcon,
			multiAudio,
			fiveCommentList,
			reward
		},
		
		data() {
			return {
				use_video:this.use_video,
				use_audio:this.use_audio,
				use_share:this.use_share,
				had_phone:this.$store.state.phone,
				currentRoute:'',		 //当前页面路由
				post:[],
				pid:'',						 //当前打卡id
				post_index:'',		 //记录打卡index
				replay_content:'', //评论内容
				c_limit:5,				 //评论条数展示限制
				// tid:'' ,
				videoContext:'',
				videoSrc:'',
				
				// 音频part
				currentTime: 0, //当前音频的播放位置
				duration: 0,//录音时长
				isplay:false,
				
				videoindex:'',
				old_id:'',
				isFull:false,
				playVideoId:null,
				
				// 分享类 -- 诗歌 小说 文章 数据
				poemDetail:{},
				novDetail :{},
				artDetail :{},
				detail:{} ,//分享类数据
				
				// 全文 or 收起
				introduce: '',					// 是否展示所有文本内容
				showTotal: true,				// 显示展开还是收起
				exchangeButton: true,		// 是否显示展开收起按钮
				showExchangeButton: false,
				rem: '',
				
				// 打赏部分
				isShowReward:false,				//是否显示打赏界面
				isenoughpay:true,					//是否足够支付		
				list:[{money:2},{money:5},{money:10},{money:20},{money:50}]  ,//预设打赏鲸果
				iscustomize:true,					//是否可选自定义鲸果数量
				rewardList:[],						//打赏列表（头像）
				coinAmount:'',						//用户拥有鲸币数量
			}
		}, 
		
		watch:{
			postsRecord: {//监听父组件传值变化
				async handler(newValue) {
					if(newValue !== this.post) {
						this.post = newValue
						for(var item of this.post){
							if(item.catetype == "分享打卡") {
								if(item.Share_type == "Poem") {
										var pdetail = await api.GetPoemDetail(item.Share_id)
										console.log("Poem");
										this.$set(item,'detail',pdetail)
									}else if(item.Share_type == "Novel") {
										var ndetail = await api.GetNovelDetail(item.Share_id)
										this.$set(item,'detail',ndetail)
									}else {
										var adetail = await api.GetArticleDetail(item.Share_id)
										this.$set(item,'detail',adetail)
									}
							}
						}
						console.log('加上分享类后的post'+this.post);
					}
					
				},
				
				deep:true
			},
		},
		
		// onPageScroll(e) {//滚动监听生命周期函数--页面中才可用
		// console.log('+++++++++++++++++++++');
		// 		let query = uni.createSelectorQuery();//查询
		// 		let wh = uni.getSystemInfoSync().windowHeight;//可视区域高度
		// 		if (this.playVideoId) {
		// 			console.log('================');
		// 			const id = this.playVideoId;
		// 			query
		// 				.select('#el' + id)
		// 				.boundingClientRect(rect => { // 我查询的是包裹视频的元素，可根据需求
		// 					let top = rect.top;//距离顶部高度
		// 					let bottom = rect.bottom;
		// 					let vh = rect.height;//元素高度
		// 					if (top < 0 || bottom > (vh+wh) ){ //当视频距离顶部为零，测了下，这个为0，视频不可见。
		// 						uni.createVideoContext('vid'+id).pause()
		// 						this.playVideoId = null;
		// 						console.log('================puase');
		// 					}
		// 				})
		// 				.exec();
		// 		}
		// 	},	

		
		async mounted() {	//此处的getme请求会多请求一次token，why？
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			this.currentRoute = curRoute
			this.post = this.postsRecord
			for(var item of this.post){
				if(item.catetype == "分享打卡") {
					if(item.Share_type == "Poem") {
							var pdetail = await api.GetPoemDetail(item.Share_id)
							console.log("Poem");
							this.$set(item,'detail',pdetail)
						}else if(item.Share_type == "Novel") {
							var ndetail = await api.GetNovelDetail(item.Share_id)
							this.$set(item,'detail',ndetail)
						}else {
							var adetail = await api.GetArticleDetail(item.Share_id)
							this.$set(item,'detail',adetail)
						}
				}
			}
			this.currentPid !== ''?await this.getInvestList():''
			await this.getCoin()
		},
		methods: {	
			videoPlay(id,src) {// 视频控制播放
				console.log(id);
					this.videoSrc = src;
				if (!this.playVideoId) {//playVideoId为默认值null
					this.playVideoId = id;
					let videoContext = uni.createVideoContext('vid' + id); //获取当前视频实例。
					videoContext.play();
					videoContext.requestFullScreen()
				} else {//playVideoId为默认值---上个视频id.
					let videoContextPrev = uni.createVideoContext('vid' + this.playVideoId);//获取上个视频实例
					if (this.playVideoId != id) {
						videoContextPrev.pause();
					} else {
						videoContextPrev.play();
						videoContext.requestFullScreen()
						
					}
						this.playVideoId = id;
						let videoContextCurrent = uni.createVideoContext('vid' + id);
						videoContextCurrent.play();
						videoContext.requestFullScreen()
				}
			},

			
			async toggleLikePost(index,item) {//切换点赞状态
				console.log('item-------------',item);
				uni.$emit('updateHotPost',index,item)
			},
			
			// async getMe() {//获取当前登录用户信息
			// 	let user = await api.GetMe()
			// 	this.tid = user.map(item => item.id)
			// 	// uni.$emit('updateHotPost')
			// 	console.log(this.tid);
			// },
			
			preview(image,images){//预览图片
				uni.previewImage({
					urls:images,
					current:image,
					indicator:"default"
				})
			},
			
			playing(e) {//开始/继续播放时触发play事件
				let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
				this.videoContent = uni.createVideoContext(currentId);
				let trailer = this.dynListData;
				trailer.forEach(function(item, index) {	// 获取json对象并遍历, 停止非当前视频
					if (item.videoUrl != null && item.videoUrl != "") {
						let temp = 'video' + item.id;
						if (temp != currentId) {
							uni.createVideoContext(temp).pause(); //暂停视频播放事件
						}
					}
	 
				})
	 
			},
			
		  deletepost(e) {//删除打卡记录
				var that = this
				var index = e.currentTarget.dataset.index;
				var pid = that.post[index].id
				uni.showModal({
					title:'提示',
					content:'确认删除？',
					success(res) {
						if(res.confirm) {
							/* api.DeletePostRecord(pid)
							that.post.splice(index,1) */
							that.deletePost(pid,index)
						}
					}
				})
			},
			
			goShareDetail(item) {//跳转到对应的分享类别详情页
				var url = ''
				if(item.Share_type == "Poem") {
					url = '/pages/post/comps/poemdetail?pid='+item.detail.id
				}else if(item.Share_type == "Novel"){
					url = '/pages/post/comps/noveldetail?nid='+ item.detail.id
				}else {
					url = '/pages/post/comps/articledetail?id=' + item.detail.id
				}
				uni.navigateTo({
					url:url
				})
			},
			
			goNewChapter(url) {//跳转到小说最新章节页面
				uni.navigateTo({
					url
				})
			},
			
			async getPhoneNumber (e) {//手机号授权
				console.log(e);
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
				console.log(e.detail.encryptedData,e.detail.iv);
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						console.log('+++++++++++',res );
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						console.log(sres);
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							console.log(this.$store);
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
			
			gocomment(post_id,index) {// 弹出评论框
				uni.hideTabBar({})
				console.log('回复打卡',post_id);
				if(!post_id) {//回复打卡
					this.pid = 0
				}else {//回复评论
					this.pid = post_id
					this.post_index = index
				}
				this.$refs.detailComment.open();
			
				console.log('uni.hideTabBar');
			},
			
			/**
			 * 回复打卡 or 评论
			 */
			clickComment() {
				this.$refs.detailComment.open();
			},
			
			closeComment() {//关闭评论弹出框
				uni.showTabBar({
					
				})
			},
			
			async sendComment(result) {//发送评论
				uni.showTabBar({})
				this.replay_content = result
				console.log(this.replay_content);
				if(!this.replay_content.trim()) {
					uni.showToast({
						title:'评论内容不能为空',
						icon:'none',
						duration:800
					})
					
					return false
				}
				let res = await api.AddUserComment(this.pid,0,this.replay_content)
				if(this.currentRoute == 'pages/post/comps/comment') {
					uni.$emit('updateComment',res,this.post_index)
				}else {
					uni.$emit('updateHotpostComment',res,this.post_index)
				}
				// this.postDetail = await api.GetPostsDetail(this.pid) //获取最新打卡详情
			},
			
			async deletePost(pid,index) {//删除打卡
				let res = await api.DeletePostRecord(pid)
				if(res.err == 0) {
					uni.showToast({
						title:res.msg
					})
					this.post.splice(index,1)
				}
			},
			
			gouserhp(uid,touserhp) {//跳转到用户主页
				if(touserhp) {
					uni.navigateTo({
						url:'/pages/user/comps/my?id='+uid
					})
				}
				
			},
			
			goCir(cid) {//跳转到对应打卡圈子
				uni.navigateTo({
					url:'/pages/circle/comps/Detail?id='+cid
				})
			},
			
			goCommentDetail(pid,cangodetail) {//跳转到打卡评论页面
				if(cangodetail) {
					uni.navigateTo({
						url:'/pages/post/comps/comment?pid='+pid
					})
				}
				
			},
			
			// 打赏相关操作
			
			
			async getCoin() {// 获取当前用户拥有鲸币数量
				this.coinAmount = await api.GetCheckCoin()
				console.log(this.coinAmount);
			},
			
			async getInvestList() {//获取打赏列表
			console.log('currentPid',this.currentPid);
				this.rewardList = await api.GetRewardIcon(this.currentPid)
				console.log(this.rewardList);
			},
			
			showPay() {//显示打赏界面
				this.isShowReward = true
			},
			
			closePay() {//关闭打赏界面
				this.isShowReward = false
				this.isenoughpay = true
			},
			
			async pay(value) {//鲸币打赏操作
			console.log('value ',value);
				let _that = this
				let j_fruit = value[0]
				let remark  = value[1]
				console.log(Number(j_fruit));
				if(isNaN(Number(j_fruit)) || Number(j_fruit) == 0) {
					uni.showToast({
						title:'请选择打赏鲸果数量',
						icon:'none'
					})
				}else {
					let res = await api.Reward(_that.currentPid,j_fruit,remark)		//先使用鲸果打赏
				  if(res.err == 2) {//鲸果不足---充值后再使用鲸果打赏
						_that.isenoughpay = false
						uni.showModal({
							title:'提示',
							content:'使用微信充值支付并打赏',
							success: async function(tip) {
								if(tip.confirm) {
									switch(uni.getSystemInfoSync().platform){
										
									    case 'android':
											
									       let res = await api.Invest(j_fruit)
									       // let res = await api.Invest(0.01)
									       let payList_id = res.order.id			//支付订单id
									       let config = res.config
									       	uni.requestPayment({
									       		provider: 'wxpay',
									       		timeStamp: config.timeStamp,//时间戳
									       		nonceStr: config.nonceStr,//随机字符串
									       		package: config.package,//统一下单接口返回的 prepay_id 参数值
									       		signType: config.signType,
									       		paySign: config.paySign,//签名内容
									       		success: async function(res) {
									       			let check = await api.checkPayList(payList_id)
									       			_that.pay(value)
									       		 },
									       		 fail: function (err) {
									       			 uni.showToast({
									       				title:err,
									       				icon:'none'
									       			 })
									       		 }
									       	});
									       break;
									
									    case 'ios':
									
									       uni.showToast({
									       	title:'因平台规则限制，充值功能暂不对IOS用户开放',
													icon:'none',
													duration:800
									       })
									       break;
									
									    default:
									
									       console.log('运行在开发者工具上')
									       break;
									}
									
								}
								
							}
						})
					}else if(res.err == 0){//鲸果充足---打赏成功
						_that.closePay()
						uni.showToast({
						  title:'打赏成功',
							duration:1000, 
							icon:'success'
						})
						await _that.getInvestList()
					}else if(res.err == 1) {//打卡已被删除
						_that.closePay()
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}
			}
			// 打赏相关操作
		},
		
		
	}
</script>

<style lang="scss" scoped>
.card:nth-last-child(1) {
	border-bottom: 2rpx  solid #F3F6F5;
}
.tui-avatar {
	padding:  30rpx 20rpx 20rpx;
	display: flex;
	image {
		height:80rpx;
		width: 80rpx;
		border-radius: 10rpx;
		
	}
	.avatar {
		border: 1rpx solid #F3F6F5;
	}
	.user-info {
		width: 600rpx;
		box-sizing: content-box;
		margin-left: 20rpx;
		.user-base {
			// display: flex;
			// justify-content: space-between;
			color: #576A94;
			font-size: 32rpx;
			.user-name {
				font-weight: 700;
			}
			.time-area {
				display: flex;
				justify-content: space-between;
				image {
					width: 76rpx;
					height: 36rpx;
					margin-left: 20rpx;
				}
			}
			.time {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				letter-spacing: 1px;
				padding: 0 0 8rpx;
				font-size: 28rpx;
				color: #9a9a9a;
				.icon-delete {
					image {
						width: 34rpx;
						height: 34rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		.user-desc {
			box-sizing: content-box;
			width: 600rpx;
			font-size: 32rpx;
			word-break: break-all;
		}
	}
}

page {
	background: #ffffff;
}
.card:nth-last-child(1) {
	border-bottom: 1rpx solid #F3F6F5;
}
.icon {
	display: flex;
	height: 60rpx;
	width: 570rpx;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-left: 122rpx;
	padding-bottom: 10rpx;
	.icon-view,.icon-liked,.icon-commented {
		display: flex;
		align-items: center;
		width: 180rpx;
		.mul-icon {
			width: 38rpx;
			height: 32rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		image {
			width: 38rpx;
			height: 32rpx;
			// margin-left: 20rpx;
		}
	}
	.icon-commented {
		button {
			padding: 0;
			margin: 0;
			background: transparent;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #4D6088;
		}
	}
	
	.icon-view {
		width: 256rpx;
		image {
			width: 40rpx;
			height: 32rpx;
		}
	}
	.icon-liked {
		display: flex;
		align-items: baseline;
		flex-direction: row-reverse;
	}
	text {
		margin-left: 10rpx;
	}
}
.view-conmment-send-bottom {
	width: 100%;
	// height: 85rpx;
	position: fixed;
	// z-index: 9999;
	bottom: 0;
	display: flex;
	flex-direction: row;
	background-color: white;
	border-top: 1px solid $view-bg-color;
}

.comment-area {
	position: fixed;
	z-index: 9999;
	bottom: 0;
}
.view-comment-textarea {
	background-color: $uni-bg-color-grey;
	border-radius: 40rpx;
	// padding: 15rpx 20rpx;
	text-align: unset;
	margin: 25rpx 20rpx;
	width: 80%;
	flex: 1;
	align-items: center;
}
.textarea-comment {
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: $uni-font-size-base;
	// color: $uni-text-color;
	color: $uni-text-sub-color;
}
.comment-liker {
	margin-left: 120rpx;
	margin-bottom: 25rpx;
	width: 580rpx;
	background-color: #F7F7F7;
	border-radius: 10rpx;
	// .border {
	// 	border-bottom: 1rpx solid #e7e7e7;
	// }
	.likers {
		display: flex;
		align-items: center;	
		font-weight: 700;
		
		image {
				margin-right: 8rpx;
				width: 30rpx;
				height: 26rpx;
		}
		word-wrap: break-word;
		word-break: break-all;
		flex-wrap: wrap;
		padding: 10rpx 18rpx;
		
	}
	.line {
		background-color: #e2e2e2;
		width: 578rpx;
		height: 2rpx;
	}
	.comment {
		padding: 10rpx 18rpx;
		.loadmore {
			font-weight: 600;
			font-size: 32rpx;
		}
	}
	.comment-item {
		line-height: 40rpx;
		color: #4D6088;
		margin: 10rpx 0;
		font-size: 32rpx;
		text:nth-child(1) {
			font-weight: 700;
		}
		text:nth-child(2) {
			color: #000000;
			padding-left: 8rpx;
		}
	}
}
.container {
	// padding-bottom: env(safe-area-inset-bottom);
}

.tui-title {
	width: 100%;
	padding: 70rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	line-height: 30rpx;
	color: #666;
}

.tui-default {
	padding: 15rpx 30rpx 18rpx;
	padding-left: 120rpx;
	
	.belong {
		// display: flex;
		display: inline-block;
		align-items: center;
		height: 45rpx;
		font-size: 26rpx;
		line-height: 45rpx;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		background-color: rgba($color: #e3e3e3, $alpha: 0.5);
		.cir {
			display: inline-block;
			zoom: 1;
		}
		image {
			width: 25rpx;
			height: 22rpx;
		}
	}
	
	
}

.tui-article {
	position: relative;
}

.tui-article-img {
	width: 100%;
	height: 300rpx;
	display: block;
}

.tui-article-title {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

.tui-cell-title {
	font-size: 32rpx;
	font-weight: 500;
	padding: 0 10rpx;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-cell-img {
	height: 160rpx;
	width: 160rpx;
}

.tui-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-mr {
	margin-right: 20rpx;
}


.pic {
	/* display: flex;
	display: -webkit-flex;
	background: #fff;
	padding: 0 40rpx 0 108rpx; */
	display: flex;
	flex-wrap: wrap;
	width: 750rpx;
	padding: 0 40rpx 0 122rpx;
	box-sizing: border-box;
	.pic-item {
		position: relative;
		// width: 185rpx;
		// height: 185rpx;
		margin-right: 10rpx;
		margin-bottom: 5rpx;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }
	}
	.only-img {
		width: 420rpx;
		height: 300rpx;
		border-radius: 6rpx;
	}
	.lot-img {
		width: 185rpx;
		height: 185rpx;
		border-radius: 6rpx;
	}
}
.up-works-area {
	display: flex;
	align-items: center;
	width: 700rpx;
	margin: 20rpx 0rpx 20rpx 120rpx;
	.works-area {
		display: flex;
		width: 550rpx;
		padding: 15rpx 20rpx;
		background-color: #F7F7F7;
		.w-cover {
			image {
				width: 130rpx;
				height: 110rpx;
				display: block;
			}
		}
		.w-body {
			display: flex;
			height: 110rpx;
			line-height: 32rpx;
			margin-left: 20rpx;
			flex-direction: column;
			font-size: 32rpx;
			.w-intro {
				font-size: 30rpx;
				height: 80rpx;
				line-height: 38rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; 
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.new-chapter {
				margin-left: 20rpx;
				font-size: 28rpx;
			} 
	}
	.works-cancel {
		image {
			width: 65rpx;
			height: 65rpx;
			margin-left: 10rpx;
		}
	}
}
.video-area {
	display: flex;
	flex-wrap: wrap;
	width: 750rpx;
	padding: 0 40rpx 0 122rpx;
	box-sizing: border-box;
	.video {
		font-size: 0;
		video {
			width: 400rpx;
			height: 440rpx;
		}
		.img_box {
			position: relative;
			width: 400rpx;
			height: 440rpx;
			.i_box {
				image {
					display:block;
					width: 400rpx;
					height: 440rpx;
				}
			}
			.video_logo {
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				bottom: 0;
				top: 0;
				left: 0;
				right: 0;
				margin: auto;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
			
		}
	}
		
	
}
// .tui-flex-pic image {
// 	width: 185rpx;
// 	height: 190rpx;
// 	padding: .5% 1%;
	
// }

.tui-content {
	padding: 0rpx 30rpx 20rpx 100rpx;
	box-sizing: border-box;
	font-size: 34rpx;
	font-weight: 400;
	color: #333;
}

.tui-color-gray {
	padding: 6rpx 0;
	margin-left: 6rpx;
	color: #ccc;
}

.reward-area {
	padding: 30rpx 0 20rpx;
	.reward-icon {
		display: flex;
		justify-content: center;
		image {
			width: 100rpx;
			height: 100rpx;
			
		}
	}
	.reward-list {
		padding: 20rpx 40rpx;
		.qty {
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #4D6088;
		}
		.qty:after,.qty:before {
			content: '';
			flex: 1;
			height: 1px;
			background: #ebebeb;
		}
		.qty:before {
			margin-right: 10rpx;
		}
		.qty:after {
			margin-left: 10rpx;
		}
		.reward-img {
			display: flex;
			align-items: center;
			padding: 20rpx 0 0 10rpx;
			flex-wrap: wrap;
			.reward-item {
				margin-right: 6rpx;
				margin-bottom: 3rpx;
				image {
					width: 58rpx;
					height: 60rpx;
					border: 1rpx solid #f3f5f6;
					border-radius: 4rpx;
				}
			}
			
		}
	}
}
</style>
